<template>
  <div class="addHouse">
    <bgHeader title="发布房源" />
    <div class="banner">
      <div class="rent-list">
        <p @click="$router.push('/search')" class="list-heard">房源信息</p>
        <van-cell-group>
          <van-cell
            @click="$router.push('/search')"
            title="小区名称"
            :value="communitySName ? communitySName : '请输入小区名称'"
            is-link
          />
        </van-cell-group>
        <div class="price">
          <div class="left">
            <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</span>
          </div>
          <input
            type="text"
            placeholder="请输入租金/月"
            v-model.number.trim="price"
            class="inp"
          />
          <div class="text">￥/月</div>
        </div>
        <div class="price">
          <div class="left">
            <span>建筑面积</span>
          </div>
          <input type="text" v-model.number.trim="size" class="inp" />
          <div class="text size">㎡</div>
        </div>
        <van-cell-group>
          <van-cell :value="ros" @click="isroomType = true" is-link>
            <template #title>
              户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
            </template>
          </van-cell>

          <!-- 楼层 -->
          <van-cell
            title="所在楼层"
            @click="isfloor = true"
            :value="fls"
            is-link
          />

          <!-- 朝向 -->
          <van-cell :value="ors" @click="isoriented = true" is-link>
            <template #title>
              朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!-- 房屋标题 -->
      <div class="rent-list">
        <p class="list-heard tite">房屋标题</p>
        <div class="tite-inp">
          <input
            class="inp"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
            type="text"
            v-model.trim="title"
          />
        </div>
        <p class="list-heard tite">房屋图片</p>
        <div class="imgAdd">
          <van-uploader v-model="fileList" multiple :after-read="afterRead" />
        </div>
        <p class="list-heard tite">房屋配置</p>
        <van-grid :border="false" :column-num="5">
          <van-grid-item
            v-for="(item, index) in supportingList"
            :key="index"
            :text="item.text"
            @click="supIcon(item.text, index)"
            :class="{ filterRight: sup.includes(item.text) }"
          >
            <template #icon>
              <span :class="item.icon"></span>
            </template>
          </van-grid-item>
        </van-grid>
        <p class="list-heard tite">房屋描述</p>

        <div class="am-textarea-control">
          <textarea
            rows="5"
            placeholder="请输入房屋描述信息"
            class="tta"
            v-model.trim="description"
          ></textarea>
        </div>
      </div>
    </div>

    <!-- dialog -->
    <van-popup
      v-model="isoriented"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <mydialog
        @setDia="isoriented = false"
        :columns="orientedList"
        @SetValue="Setoriented"
      />
    </van-popup>
    <van-popup
      v-model="isroomType"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <mydialog
        @setDia="isroomType = false"
        :columns="roomTypeList"
        @SetValue="SetroomType"
      />
    </van-popup>
    <van-popup v-model="isfloor" position="bottom" :style="{ height: '40%' }">
      <mydialog
        @setDia="isfloor = false"
        :columns="floorList"
        @SetValue="Setfloor"
      />
    </van-popup>

    <!-- 底部提交按钮和取消按钮 -->
    <div class="andBtn">
      <div class="left-btn" @click="isNo">取消</div>
      <div class="right-btn" @click="isYes">确认</div>
    </div>
  </div>
</template>

<script>
import bgHeader from '@/components/gbhearder'
import { addHouseInfo, HouseImg, sendHouseInfo } from '@/api'
import mydialog from './component/MyDialogItem.vue'
import { mapState } from 'vuex'
export default {
  name: 'addHouse',
  components: {
    bgHeader,
    mydialog
  },
  props: {},
  data() {
    return {
      // 房屋标题
      title: '',
      // 房间描述
      description: '',
      // 房屋图片
      houseImg: '',
      // 房屋朝向
      oriented: '',
      // 房间配置
      supporting: '',
      // 价格
      price: '',
      // roomType 房间数量
      roomType: '',
      // 面积
      size: 0,
      // 楼层
      floor: '',
      // 社区
      community: this.getCommunit,
      // 楼层列表
      floorList: [],
      // 图片列表
      fileList: [],
      //  房间列表
      roomTypeList: [],
      // 朝向列表
      orientedList: [],
      // 图标和房屋配置
      supportingList: [],
      // 图标
      iconsList: [
        'iconfont icon-vid HousePackage_icon__2hT31',
        'iconfont icon-ref HousePackage_icon__2hT31',
        'iconfont icon-wash HousePackage_icon__2hT31',
        'iconfont icon-air HousePackage_icon__2hT31',
        'iconfont icon-heater HousePackage_icon__2hT31',
        'iconfont icon-sofa HousePackage_icon__2hT31',
        'iconfont icon-Heat HousePackage_icon__2hT31',
        'iconfont icon-broadband HousePackage_icon__2hT31',
        'iconfont icon-wardrobe HousePackage_icon__2hT31',
        'iconfont icon-gas HousePackage_icon__2hT31'
      ],
      // sup列表
      sup: [],

      // isfloor弹出层
      isfloor: false,

      // roomType 房间数量 弹出层
      isroomType: false,

      // 朝向弹出层
      isoriented: false,
      // 提示文字
      ors: '请选择',
      fls: '请选择',
      ros: '请选择',
      // 存放房屋图片
      imgArr: []
    }
  },
  computed: {
    ...mapState(['communityS', 'communitySName']),
    getCommunity() {
      return this.communityS ? this.communityS : ''
    }
  },
  watch: {},
  created() {
    this.getAddHouseInfo()
  },
  methods: {
    // 获取房屋所需要的条件
    async getAddHouseInfo() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await addHouseInfo()
      res.body.supporting.forEach((item) => {
        this.supportingList.push({
          text: item.label,
          value: item.value
        })
      })
      this.supportingList.forEach((item, i) => {
        this.iconsList.forEach((icon, ind) => {
          if (i === ind) {
            item.icon = icon
          }
        })
      })
      res.body.floor.forEach((item) => {
        this.floorList.push({
          text: item.label,
          value: item.value
        })
      })
      res.body.oriented.forEach((item) => {
        this.orientedList.push({
          text: item.label,
          value: item.value
        })
      })
      res.body.roomType.forEach((item) => {
        this.roomTypeList.push({
          text: item.label,
          value: item.value
        })
      })
      this.$toast.clear()
    },

    // 点击icon
    supIcon(sup) {
      if (!this.sup.includes(sup)) {
        this.sup.push(sup)
        this.supporting = this.sup.join('|')
      } else {
        const ind = this.sup.indexOf(sup)
        this.sup.splice(ind, 1)
        this.supporting = this.sup.join('|')
      }
    },
    // 修改Setoriented 朝向
    Setoriented(val) {
      this.oriented = val.value
      this.ors = val.text
      this.isoriented = false
    },

    // 修改Setoriented 朝向
    SetroomType(val) {
      this.roomType = val.value
      this.ros = val.text
      this.isroomType = false
    },
    // 修改Setoriented 朝向
    Setfloor(val) {
      this.floor = val.value
      this.fls = val.text
      this.isfloor = false
    },

    // 上传图片事件
    async afterRead(file) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const formData = new FormData()
      formData.append('file', file.file)
      const imgArr = await HouseImg(formData)
      this.imgArr.push(...imgArr.data.body)
      this.houseImg = this.imgArr.join('|')
      this.$toast.clear()
    },

    // 取消编辑事件
    async isNo() {
      try {
        await this.$dialog.confirm({
          title: '提示',
          message: '放弃编辑房源？',
          width: '270px',
          theme: 'round',
          confirmButtonText: '继续',
          confirmButtonColor: '#2c9bec',
          cancelButtonText: '放弃'
        })
        return
      } catch (e) {
        this.$router.push('/home')
      }
    },

    // 确认发布房屋
    async isYes() {
      // 提示loading
      this.$toast.loading({
        message: '发布中...',
        forbidClick: true,
        duration: 0
      })
      const data = {
        title: this.title,
        description: this.description,
        houseImg: this.houseImg,
        oriented: this.oriented,
        supporting: this.supporting,
        price: this.price,
        roomType: this.roomType,
        size: this.size,
        floor: this.floor,
        community: this.community
      }
      const { data: res } = await sendHouseInfo(data)
      this.$toast.clear()
      if (res.status === 400) {
        return this.$toast.fail('发布失败!')
      }
      try {
        await this.$dialog.confirm({
          title: '提示',
          message: '房屋发布成功！',
          width: '270px',
          theme: 'round',
          confirmButtonText: '继续发布',
          confirmButtonColor: '#2c9bec',
          cancelButtonText: '去查看'
        })
        this.floor = ''
        this.description = ''
        this.houseImg = ''
        this.oriented = ''
        this.supporting = ''
        this.price = ''
        this.roomType = ''
        this.size = 0
        this.fileList = []
        this.ors = '请选择'
        this.fls = '请选择'
        this.ros = '请选择'
      } catch (e) {
        this.$router.push('/house')
      }
    }
  }
}
</script>

<style scoped lang="less">
.addHouse {
  padding-bottom: 100px;
  background-color: #f5f5f9;
  .banner {
    height: 100%;
    padding-top: 90px;
    font-size: 28px;
    background-color: #fff;
    .imgAdd {
      min-height: 217px;
    }
    .rent-list {
      .list-heard {
        color: #21b97a;
        background-color: #fff;
        font-size: 30px;
        padding: 30px 30px 18px;
        border-bottom: 2px solid #eeeeee;
      }
      .price {
        display: flex;
        width: 720px;
        height: 88px;
        padding-right: 30px;
        margin-left: 30px;
        align-items: center;
        color: #666;
        font-size: 28px;
        border-bottom: 2px solid #eeeeee;
        .inp {
          width: 432px;
          border: unset;
          margin-left: 60px;
          font-size: 28px;
          color: #333;
          &::-webkit-input-placeholder {
            color: #c1bbc1;
            font-size: 26px;
          }
        }
        .text {
          font-size: 28px;
        }
        .size {
          margin-left: 36px;
        }
      }
    }
    .tite {
      color: #333 !important;
    }
    .tite-inp {
      height: 88px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      .inp {
        border: unset;
        width: 690px;
        &::-webkit-input-placeholder {
          color: #c1bbc1;
          font-size: 26px;
        }
      }
    }
    .am-textarea-control {
      width: 690px;
      height: 294px;
      padding: 20px 0px 18px;
      margin-left: 30px;
      .tta {
        width: 100%;
        height: 100%;
        border: unset;
      }
    }
  }
  :deep(.van-grid-item__content) {
    padding: 0;
    margin: 20px 0;
    .iconfont {
      font-size: 46px !important;
    }
    .van-grid-item__text {
      font-size: 28px;
    }
    .van-grid-item__text {
      color: unset;
    }
  }
  .filterRight {
    color: #21b97a !important;
  }
}
.andBtn {
  position: fixed;
  bottom: 0;
  z-index: 999;
  height: 90px;
  width: 100%;
  display: flex;
  .left-btn {
    flex: 1;
    background-color: #fff;
    color: #21b97a;
    height: 90px;
    text-align: center;
    line-height: 90px;
  }
  .right-btn {
    flex: 1;
    height: 90px;
    background-color: #21b97a;
    line-height: 90px;
    color: #fff;
    text-align: center;
  }
}
</style>
